var button = document.querySelector('#next');
var input = document.querySelector('#information');
var step = 0;
var yx = false, w = false;
var text = document.querySelector('h2');
var username = "", userkey = "", firstkey = "", secondkey = "", email = "";
input.oninput = function () {
    if (step == 1) {
        this.value = this.value.replace(new RegExp('[^\\d]'), '');
        if (this.value.length == 4) {
            sipt.focus();
        }
        // update();
    }

    if (step == 5) {
        if (this.value.length == 1) {
            tipt[0].focus();
        }
    }
    changecolor();
}

var changecolor = function () {
    if ((step == 0 && testemail()) || (step == 1 && dateright()) || (step == 2 && allowed()) || (step == 3 && allowkey()) || step == 4 || (step == 5 && md())) {
        yx = true;
        button.style.background = '#D13639';
    } else {
        yx = false;
        button.style.background = 'white';
    }
}

button.onclick = function () {
    if (yx) {
        switch (step) {
            case 0:
                step++
                email = input.value;
                step1();
                break;
            case 1:
                step++;
                recover();
                break;
            case 2:
                if (hadname()) {
                    w = true;
                    wrong();
                    break;
                }
                if (w) {
                    k.removeChild(p);
                }
                w = false;
                if(username.length<2)username = input.value;
                step++;
                break;
            case 3:
                firstkey = input.value;
                step++;
                break;
            case 4:
                if (!again()) {
                    w = true;
                    wrong();
                    break;
                }
                if (w) {
                    k.removeChild(p);
                }
                w = false;
                userkey = input.value;
                step++;
                tmd();
                break;
            case 5:
                step++;
                finish();
                break;
            case 6:
                location.href = 'login.html'+"?from="+geturl()+"$";
                break;
        }
        changetext();
        if (step != 6) button.style.background = 'white';
    }
}

function testemail() {
    var lemail = input.value;
    pattern = new RegExp('[a-zA-Z0-9]+@[a-zA-Z0-9]+\\.(com|cn)');
    return pattern.test(lemail);
}

function changetext() {
    if (step == 1) {
        text.innerHTML = '请问您何时出生';
        document.querySelector('#ol').style.display = 'none';
    } else if (step == 2) {
        text.innerHTML = '请问用户名';
    } else if (step == 3) {
        text.innerHTML = '请输入登录密码';
        document.querySelector('label').innerHTML = '登录密码';
    } else if (step == 4) {
        text.innerHTML = '请再次输入密码';
    } else if (step == 5) {
        text.innerHTML = '请输入6位邮箱验证码';
        document.querySelector('label').innerHTML = '邮';
    } else if (step == 6) {
        text.innerHTML = '注册成功点击按钮放回登录界面';
    }
    polite();
    input.value = "";
}

input.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        button.click();
    }
});
var lm = document.querySelector('#lm');
var lmdiv = document.querySelector('#lmdiv');
var empty = document.querySelectorAll('.empty');
function polite() {
    if (step == 1) {
        lm.innerHTML = '请先透露您的年龄<br>格式:yyyy MM dd';
        lm.style.color = '#666666';
        lmdiv.style.marginTop = "30px";
        lmdiv.style.marginRight = "20px";
        empty[0].style.paddingBottom = '80px';
        empty[1].style.paddingBottom = '80px';
    } else if (step == 2) {
        lm.innerHTML = '这将成为您登录的用户名<h5>至少2位</h5>'
    } else if (step == 3) {
        lm.innerHTML = '这将成为您登录的密码<h5>请包含大写字母,小写字母,数字且不少于7位</h5>'
    } else if (step == 4) {
        lm.innerHTML = "";
    } else if (step == 5) {
        lm.innerHTML = '谁便输,不会发邮件';
    } else if (step == 6) {
        lm.innerHTML = ''
    }
}


var sipt = document.createElement('input');
var sipt2 = document.createElement('input');
var son2, son1;

sipt2.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        button.click();
    }
});
sipt2.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && sipt2.value.length == 0) {
        sipt.focus();
    }
});

sipt.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && sipt.value.length == 0) {
        input.focus();
    }
});

function step1() {
    son1 = document.createElement('div');
    son1.className = 'input-data';
    // sipt = document.createElement('input');
    var sd = document.createElement('div');
    var sl = document.createElement('label');
    sl.innerHTML = '月';
    sd.className = 'underline';
    son1.appendChild(sipt);
    son1.appendChild(sd);
    son1.appendChild(sl);
    document.querySelector('.wrapper').appendChild(son1);


    son2 = document.createElement('div');
    son2.className = 'input-data';
    // sipt2 = document.createElement('input');
    var sd2 = document.createElement('div');
    var sl2 = document.createElement('label');
    sl2.innerHTML = '日';
    sd2.className = 'underline';
    son2.appendChild(sipt2);
    son2.appendChild(sd2);
    son2.appendChild(sl2);
    document.querySelector('.wrapper').appendChild(son2);

    document.querySelector('label').innerHTML = '年';

    var iptary = document.querySelectorAll('input');

    for (var i = 0; i < iptary.length; i++) {
        iptary[i].style.width = '100px';
        iptary[i].type = 'text';
        iptary[i].style.display = 'inline';
        iptary[i].required = "1"
    }
    var udlary = document.querySelectorAll('.underline');

    for (var i = 0; i < udlary.length; i++) {
        udlary[i].style.width = '100px';
        udlary[i].style.className = 'underline';
    }

    var divary = document.querySelectorAll('.input-data');
    for (var i = 0; i < divary.length; i++) {
        divary[i].style.width = '100px';
        divary[i].style.float = 'left';
    }
    divary[0].style.width = '130px';
    udlary[0].style.width = '130px';
    iptary[0].style.width = '130px';
}


sipt.oninput = function () {
    this.value = this.value.replace(new RegExp('[^\\d]'), '');
    if (sipt.value.length == 2) { sipt2.focus(); changecolor(); }
    if (sipt.value.length == 0) {
        input.focus();
    }
}

sipt2.oninput = function () {
    this.value = this.value.replace(new RegExp('[^\\d]'), '');
    if (sipt2.value.length == 0) {
        sipt.focus();
    }
    if (sipt2.value.length == 2) {
        changecolor();
    }
}
sipt.maxLength = '2';
sipt2.maxLength = '2';
var yyyy, mm, dd;
var dateary = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function dateright() {
    yyyy = parseInt(input.value);
    mm = parseInt(sipt.value);
    dd = parseInt(sipt2.value);
    if (mm <= 0 || mm > 12 || dd <= 0 || dd > 31 || mm == null || dd == null) return false;
    if (run(yyyy)) {
        dateary[1] = 29;
        return (dd <= dateary[mm - 1]);
    } else {
        dateary[1] = 28;
        return (dd <= dateary[mm - 1]);
    }
}

function run(yyyy) {
    return yyyy % 400 == 0 || (yyyy % 100 == 0 && yyyy % 4 != 0);
}

function recover() {
    son1.parentNode.removeChild(son1);
    son2.parentNode.removeChild(son2);
    document.querySelector('.input-data').style.width = '400px';
    document.querySelector('.underline').style.width = '350px';
    input.style.width = '350px';
    document.querySelector('label').innerHTML = '用户名';
    input.focus();
}

function hadname() {
    for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) == input.value) return true;
    }
    return false;
}

function allowed() {

    return input.value.length > 1;
}
var p = document.createElement('p');
var k = document.querySelectorAll('.empty')[1];
function wrong() {

    k.appendChild(p);
    if (step != 2) p.innerHTML = '你输入的两次密码不一致<br><h5>忘记密码?<br><a id="return">点此返回上一级<a></h5>';
    else p.innerHTML = '用户名已存在'
    p.style.textAlign = 'center';
    p.style.color = 'red';
    if(step!=2){
    document.querySelector('#return').onclick = function () {
        k.removeChild(p);
        w=false;
        step -= 2;
        yx = true;
        button.click();
    }
    }
}

function allowkey() {
    if (input.value.length < 7) return false;
    var A = false;
    var a = false;
    var a1 = false;
    var str = input.value;
    for (var i = 0; i < str.length; i++) {
        var t = str.charAt(i);
        if (t >= 'a' && t <= 'z') a = true;
        if (t >= 'A' && t <= 'Z') A = true;
        if (t >= 0 && t <= 9) a1 = true;
    }
    return a && A && a1;
}

function again() {
    return input.value == firstkey;
}


function finish() {
    document.querySelector('.wrapper').style.display = 'none';
    yx = true;
    localStorage.setItem(username, gai(JSON.stringify((new person).arr)));
}

var tipt = new Array;
for (var i = 0; i < 5; i++) {
    tipt.push(document.createElement('input'));
}


var tud = new Array;

for (var i = 0; i < 5; i++) {
    tud.push(document.createElement('div'));
    tud[i].className = 'underline';
}
var emmm = ['邮', '箱', '验', '证', '码', '!']
var tlab = new Array;
for (var i = 0; i < 5; i++) {
    tlab.push(document.createElement('label'));
    tlab[i].innerHTML = emmm[i + 1];
}

var tda = new Array;

for (var i = 0; i < 5; i++) {
    tda.push(document.createElement('div'));
    tda[i].className = 'input-data';
    tda[i].style.float = "left";
}

function tmd() {
    for (var i = 0; i < 5; i++) {
        tda[i].appendChild(tipt[i]);
        tda[i].appendChild(tud[i]);
        tda[i].appendChild(tlab[i]);
        document.querySelector('.wrapper').appendChild(tda[i]);
    }


    var allipt = document.querySelectorAll('input');
    for (var i = 0; i < allipt.length; i++) {
        allipt[i].style.width = '56px';
        allipt[i].type = 'text';
        allipt[i].style.display = 'inline';
        allipt[i].required = "1";
        allipt[i].maxLength = 1;
    }
    var allda = document.querySelectorAll('.input-data');
    for (var i = 0; i < allda.length; i++) {
        allda[i].style.width = '56px';
    }

    var allund = document.querySelectorAll('.underline');
    for (var i = 0; i < allund.length; i++) {
        allund[i].style.width = '56px'
    }
}

tipt[0].oninput = function () {
    if (this.value.length == 1) {
        tipt[1].focus();
    }
    if (this.value.length == 0) {
        input.focus();
    }
    changecolor();
}

tipt[1].oninput = function () {
    if (this.value.length == 1) {
        tipt[2].focus();
    }
    if (this.value.length == 0) {
        tipt[0].focus();
    }
    changecolor();
}

tipt[2].oninput = function () {
    if (this.value.length == 1) {
        tipt[3].focus();
    }
    if (this.value.length == 0) {
        tipt[1].focus();
    }
    changecolor();
}

tipt[3].oninput = function () {
    if (this.value.length == 1) {
        tipt[4].focus();
    }
    if (this.value.length == 0) {
        tipt[2].focus();
    }
    changecolor();
}

tipt[4].oninput = function () {
    if (this.value.length == 0) {
        tipt[3].focus();
    }
    changecolor();
}
tipt[4].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        button.click();
    }
});

function md() {
    for (var i = 0; i < 5; i++) {
        if (tipt[i].value.length < 1) return false;
    }
    return input.value.length > 0;
}



tipt[0].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && tipt[0].value.length == 0) {
        input.focus();
    }
});

tipt[1].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && tipt[1].value.length == 0) {
        tipt[0].focus();
    }
});


tipt[2].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && tipt[2].value.length == 0) {
        tipt[1].focus();
    }
});


tipt[3].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && tipt[3].value.length == 0) {
        tipt[2].focus();
    }
});


tipt[4].addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 8 && tipt[4].value.length == 0) {
        tipt[3].focus();
    }
});

geturl = function () {
    var url = window.location.href;
    var start = url.indexOf('from=');
    var fw = "";
    fw = url.substring(start + 5, url.indexOf('$'));
    return fw;
}

// JSON.stringify();

person=function(){
    var pasewprd,touxiang,nicheng,chushengdi,geyan,duanwei,img1,img2,img3;
    pasewprd=userkey;
    touxiang='img/xiaoji.jpg';
    nicheng=username;
    chushengdi='艾欧尼亚';
    geyan='时间不在于拥有多少而在于怎样使用';
    duanwei='无敌青铜';
    img1='img/yasuo1.jpg';
    img2='img/yonen2.jpg';
    img3='img/jianmo1.jpg';
    var arr=new Array;
    arr=[pasewprd,touxiang,nicheng,chushengdi,geyan,duanwei,img1,img2,img3];
    for(var i=0;i<10;i++){
        var t=ramdom();
        arr.push(t);
    }
    this.arr=arr;
}

gai=function(sj){
var ans=sj;
ans=ans.replace('[','');
ans=ans.replace(']','');
ans=ans.replace(/"/g,'');
return ans;
}

ramdom=function(){
    var t=Math.floor(Math.random()*20);
    var arr=['失败','胜利'];
    var y=Math.floor(Math.random()*2);
    var ans=t+";"+arr[y]+";"+Kda()+";"+moshi()+";";
    return ans;
}

moshi=function(){
    var arr=['大乱斗','匹配战','排位赛','无限火力'];
    var y=Math.floor(Math.random()*4);
    return arr[y];
}


Kda=function(){
    var k,d,a;
    k=Math.floor(Math.random()*21);
    d=Math.floor(Math.random()*21);
    a=Math.floor(Math.random()*21);
    return k+"/"+d+"/"+a;
}